.container {
    display: grid;
    grid-template-columns: 200px 200px;
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
    "hd hd hd hd"
    "sb ct ct ct"
    "ft ft ft ft";
}

.header {
    grid-area: hd;
}

.sidebar {
    grid-area: sb;
}

.content{
    grid-area: ct;
}

.footer{
    grid-area: ft;
}

.box {
    background: yellow;
    border: 1px solid black;
}

#nestedBox {
    display: grid;
    background: rgb(180, 179, 179);
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, 200px);
    justify-content: space-around;
    align-items: center;
}

.photoBox {
    width: 200px;
    height: 150px;
    border: 1px solid red;
    
}

#one{
    background-image: url("../images/photo1.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

#two{
    background-image: url("../images/photo2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#three{
    background-image: url("../images/photo3.jpg");
    background-size: 100% 100%;
}

#four{
    background-image: url("../images/photo4.jpg");
    background-size: cover;
}